import React, { useEffect, useRef, useState } from 'react';
import {
  Input,
  Space,
  Card,
  Form,
  Grid,
  Spin,
  Switch,
  Message,
  Select,
  InputNumber,
  Button,
} from '@arco-design/web-react';
import styles from '../style/index.module.less';
import UploadImage from '@/components/UploadImage';
import { queryArticles, create, update } from '@/api/articles';
import { getCategoriesList } from '@/api/categories';
import { getTagsList } from '@/api/tags';
import { IconSave } from '@arco-design/web-react/icon';
import Editor from 'for-editor';
import '../mock';
import '../../categories/mock';
import '../../tags/mock';
import { upload } from '@/api/common';
import { useLocation, useHistory } from 'react-router-dom';

const layout = {
  labelCol: {
    span: 2,
  },
  wrapperCol: {
    span: 22,
  },
};

const formItemLayout = {
  labelCol: {
    span: 4,
  },
  wrapperCol: {
    span: 20,
  },
};

const formItemLayout2 = {
  labelCol: {
    span: 10,
  },
  wrapperCol: {
    span: 14,
  },
};
const Row = Grid.Row;
const Col = Grid.Col;
const Edit = () => {
  const [form] = Form.useForm();
  const [time, setTime] = useState();
  const [categoriesArr, setCategoriesArr] = useState([]);
  const [tagsArr, setTagsArr] = useState([]);
  const [loading, setLoding] = useState(false);
  const history = useHistory();

  const editorRef = useRef<any>();
  const { search } = useLocation();
  console.log(search);
  let id = '';
  if (search) {
    id = search.split('id=')[1];
  }else{
    form.resetFields()
  }

  //初始化数据
  const loadData = async (isRefresh?: boolean) => {
    if (!id) return;
    const res: any = await queryArticles({ id });
    if (isRefresh) {
      Message.success('刷新成功');
    }
    const data = res.data;

    if (!data) return;
    console.log('data', data);
    data.cover = [
      {
        imgUrl: data.cover,
      },
    ];
    form.setFieldsValue(data);
    setTime(data.updateTime);
  };

  // 获取标签
  const getTags = async () => {
    const res: any = await getTagsList({
      page: 1,
      pageSize: 9999,
    });
    const list = res.data.list?.map((item) => {
      item.key = item._id;
      item.value = item.name;
      return item;
    });
    setTagsArr(list);
  };

  // 获取分类
  const getCategories = async () => {
    const res: any = await getCategoriesList({
      page: 1,
      pageSize: 9999,
    });
    const list = res.data.list?.map((item) => {
      item.key = item._id;
      item.value = item.name;
      return item;
    });
    setCategoriesArr(list);
  };

  useEffect(() => {
    getTags();
    getCategories();
    loadData();
  }, []);

  // 保存
  const onSave = async (publishStatus) => {
    await form.validate();
    setLoding(true);
    const values = await form.getFields();
    values.cover = values.cover[0].imgUrl;
    values.publishStatus = publishStatus;
    if (id) {
      values.id = id;
    }
    console.log(values);
    let func = id ? update : create;
    const res: any = await func(values);
    if (res.data) {
      history.push('/blog/articles/list');
      Message.success(res.msg);
    } else {
      Message.error('修改失败，请重试');
      setLoding(false);
    }
  };

  // 发布
  const onPublish = async () => {
    onSave(1);
  };

  const addImg = async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    // const res = await upload(formData);
    const res = [
      {
        hash: 'FgOETQ8j4Zpygl6WWpZQ_75N20Sf',
        key: '3a4e66a577cde9b8e8c5550dc51aaaba.png',
        url: 'http://img.nevergiveupt.top/3a4e66a577cde9b8e8c5550dc51aaaba.png',
      },
    ];
    if (res) {
      editorRef.current.$img2Url(file.name, res[0].url);
    }
  };

  return (
    <>
      <Spin
        loading={loading}
        className={styles.container}
        style={{ display: 'block' }}
      >
        <div className={styles.container}>
          <Card hoverable>
            <Form
              {...layout}
              form={form}
              initialValues={{
                isCollect: false,
                isReward: false,
                isComment: true,
                isLike: true,
                views: 1,
                like: 1,
                collect: 0,
                comment: 0,
              }}
            >
              <Form.Item
                label="文章标题"
                field="title"
                rules={[{ required: true, message: '请输入文章标题' }]}
              >
                <Input placeholder="请输入文章标题" />
              </Form.Item>

              <Form.Item
                label="文章简介"
                field="introduction"
                rules={[
                  { required: true, message: '请输入文章简介' },
                  {
                    minLength: 10,
                    message: '至少10个字符',
                  },
                  {
                    maxLength: 500,
                    message: '不能超过500个字符',
                  },
                ]}
              >
                <Input.TextArea rows={5} />
              </Form.Item>

              <Row>
                <Col span={12}>
                  <Form.Item
                    label="文章封面"
                    field="cover"
                    rules={[{ required: true, message: '请添加文章封面' }]}
                    {...formItemLayout}
                  >
                    <UploadImage showAction={false} showLink={false} />
                  </Form.Item>

                  <Form.Item
                    field="categories"
                    label="选个分类"
                    {...formItemLayout}
                    rules={[{ required: true, message: '请给文章选个分类' }]}
                  >
                    <Select placeholder="请给文章选个分类">
                      {categoriesArr.map((item) => (
                        <Select.Option key={item.key} value={item.value}>
                          {item.value}
                        </Select.Option>
                      ))}
                    </Select>
                  </Form.Item>

                  <Form.Item
                    field="tags"
                    label="贴个标签"
                    {...formItemLayout}
                    rules={[{ required: true, message: '请给文章贴个标签' }]}
                  >
                    <Select mode="multiple" placeholder="请给文章贴个标签">
                      {tagsArr.map((item) => (
                        <Select.Option key={item.key} value={item.value}>
                          {item.value}
                        </Select.Option>
                      ))}
                    </Select>
                  </Form.Item>
                </Col>
                <Col span={11} offset={1}>
                  <Row>
                    <Col span={8}>
                      <Form.Item
                        {...formItemLayout2}
                        label="评论"
                        field="isComment"
                        triggerPropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                      <Form.Item
                        {...formItemLayout2}
                        label="点赞"
                        field="isLike"
                        triggerPropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                      <Form.Item
                        {...formItemLayout2}
                        label="收藏"
                        field="isCollect"
                        triggerPropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                      <Form.Item
                        {...formItemLayout2}
                        label="打赏"
                        field="isReward"
                        triggerPropName="checked"
                      >
                        <Switch />
                      </Form.Item>
                    </Col>
                    <Col span={8}>
                      <Form.Item
                        {...formItemLayout2}
                        label="查看数量"
                        field="views"
                        rules={[{ required: true, message: '请输入查看数量' }]}
                      >
                        <InputNumber />
                      </Form.Item>
                      <Form.Item
                        {...formItemLayout2}
                        label="点赞数量"
                        field="like"
                        rules={[{ required: true, message: '请输入点赞数量' }]}
                      >
                        <InputNumber />
                      </Form.Item>
                      <Form.Item
                        {...formItemLayout2}
                        label="收藏数量"
                        field="collect"
                        rules={[{ required: true, message: '请输入收藏数量' }]}
                      >
                        <InputNumber />
                      </Form.Item>
                    </Col>
                  </Row>
                </Col>
              </Row>

              <Form.Item
                wrapperCol={{ span: 24 }}
                field="content"
                rules={[{ required: true, message: '请撰写文章' }]}
              >
                <Editor
                  ref={(el) => (editorRef.current = el)}
                  addImg={(file) => addImg(file)}
                  placeholder="请撰写文章"
                />
              </Form.Item>
              <Card
                className={styles['save-card']}
                headerStyle={{
                  border: 'none',
                  height: 'auto',
                  paddingTop: '20px',
                }}
              >
                <Row>
                  <Col span={24}>
                    <Space size="large">
                      <Button type="text">
                        上次更新：{time || '0000-00-00'}
                      </Button>
                      <Button
                        type="primary"
                        onClick={() => {
                          onSave(0);
                        }}
                        icon={<IconSave />}
                      >
                        保存
                      </Button>
                      <Button
                        type="primary"
                        onClick={onPublish}
                        icon={<IconSave />}
                      >
                        发布
                      </Button>
                    </Space>
                  </Col>
                </Row>
              </Card>
            </Form>
          </Card>
        </div>
      </Spin>
    </>
  );
};

export default Edit;
